﻿<!doctype html>
<html><head>
<meta charset="utf-8">
<title>html5多图上传预览</title>
<script src="../js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<form id="files">
    <input type="file" id="file" multiple name="file" onchange="img()">
    
    <div id="img">

    </div>
</form>

<script>
// 请在该段js代码请引用jq,否则代码无效
function img() {
    var file = document.getElementById("file").files; //获取input file的文件对象
    for (var i = 0; i < file.length; i++) { //多图,单图不用for
        var url = URL.createObjectURL(file[i]); //获取所选文件的临时地址
        $("#img").append('<img src="' + url + '" alt="" widht="100px" height="200px">'); //单图用html,多图用append
    } // 图片预览就是这么简单!

    // files(file)//多图异步上传方法
}

// 多图异步上传
// function files(file){
// var file = Array.from(file);//将file文件转成数组类型
// var files = new FormData($("#files")[0]);//获取form对象
// for ( var i = 0; i < file.length; i++ ) {
// 	files.append( 'imgs[]',file[i]);//把文件属性存到数组
// 	// PHP后台用$_FILES['img']接收  
// }
// $.ajax( {
// 			url: '123.php',//你的保存文件脚本的路径
// 			type: 'POST',
// 			data:files,
// 			contentType: false, //不设置内容类型
// 			processData: false, //不处理数据
// 			cache:"false",
// 			async:"true",
// 			dataType:"json",
// 			success: function (data) {
// 				alert('上传成功');
// 				console.log(data)
// 			},
// 			error: function () {
// 				alert('上传失败');
// 			}
// 		} )
// }
</script>

</body>
</html>
